<!-- 商品列表页面 -->
<template>
    <div>
        <div class="grid-content">
            <el-input class="m-2" v-model="data.title" placeholder="请输入商品名称" clearable />
            <el-input class="m-2" v-model="data.barcode" placeholder="请输入商品条形码" clearable />
            <el-select v-model="data.status" placeholder="选择商品状态" clearable class="m-2">
                <el-option v-for="item in shopStatusMap" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-cascader v-model="data.categoryId" placeholder="选择类目" :options="categoryTreeData" clearable
                :props="{ emitPath: false, label: 'title', value: 'id', children: 'childrenList' }" />
            <el-button type="primary" :icon="Search" class="btn" @click="init">查找</el-button>
            <el-button type="primary" :icon="Plus" @click="handleAdd"
                v-permission="'product:product:create'">添加</el-button>
        </div>
        <el-table :data="tableData" border style="width:100%" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column type="selection" width="50" />
            <el-table-column type="expand" label="sku信息" width="80">
                <template #default="props">
                    <el-table :data="props.row.skuList" border style="width:100%" :cell-style="{ textAlign: 'center' }"
                        :header-cell-style="{ 'text-align': 'center' }">
                        <el-table-column prop="barCode" label="商品条码" />
                        <el-table-column prop="specification" label="商品规格" />
                        <el-table-column prop="stock" label="商品库存" />
                        <el-table-column prop="originalPrice" label="原价" />
                        <el-table-column prop="price" label="现价" />
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column prop="id" label="商品ID" width="90" />
            <el-table-column prop="title" label="名称" width="300" />
            <el-table-column label="图片">
                <template #default="scope">
                    <el-popover trigger="hover" placement="right-start" width="300px">
                        <template #default>
                            <el-image :src="scope.row.img" />
                        </template>
                        <template #reference>
                            <el-image :src="scope.row.img" />
                        </template>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="商品详细介绍" width="120">
                <template #default="scope">
                    <el-button type="primary" @click="handleSee(scope.$index, scope.row)">查看</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="categoryId" label="类目ID" width="90" />
            <el-table-column prop="freightTemplateId" label="邮费模板ID" width="100" />
            <el-table-column prop="sales" label="销量" />
            <el-table-column prop="unit" label="单位" />
            <el-table-column label="是否在售" width="100">
                <template #default="scope">
                    <el-tag :type="scope.row.status ? 'success' : 'info'">{{ scope.row.status ? '在售' : '未售' }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="description" label="描述" width="200" />
            <el-table-column label="操作" width="160">
                <template #default="scope">
                    <el-button type="primary" @click="handleEdit(scope.$index, scope.row)"
                        v-permission="'product:product:edit'">
                        编辑
                    </el-button>
                    <el-button :type="scope.row.status ? 'warning' : 'success'"
                        @click="handleLower(scope.$index, scope.row)">
                        {{ scope.row.status ? '下架' : '上架' }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <Pagination v-bind="pagination" @page-change="handlePageChange" /><!--分页器-->
        <!-- 商品详细介绍弹框 -->
        <el-dialog v-model="dialogImageVisible" title="商品详情" class="dialog" width="790">
            <div v-html="detailImage"></div>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { post } from "@/utils/http";
import { Search, Plus } from '@element-plus/icons-vue';//图标 
import { PaginationClass } from "#/index";//自定义表单分页数据类型
import { ElMessage } from 'element-plus'//提示信息
import { useRouter } from 'vue-router'//路由跳转

const router = useRouter()//实例化路由函数
const pagination = ref(new PaginationClass())//分页数据
const tableData = ref([])//表格数据
const categoryTreeData = ref([])//类目树形菜单数据
const dialogImageVisible = ref(false)//控制商品详细介绍弹框是否显示
const detailImage = ref('')//商品详细介绍html图片标签
const shopStatusMap = reactive([//商品状态
    { value: 0, label: '未售' },
    { value: 1, label: '在售' }
])

let data = ref({ //请求传递的数据
    _gp: 'admin.product',
    _mt: 'list',
    categoryId: '',//搜索分类
    title: '',//搜索标题
    barcode: '',//商品条形码
    status: '',//商品状态
    page: 1, //当前的页数
    limit: 10 //每页显示条数
})

onMounted(() => {
    init()
})

// 初始化数据
function init() {
    post(data.value).then((res) => {
        console.log(res);
        let { data: { items, total } } = res;
        tableData.value = items;//表格数据赋值
        pagination.value.total = total;//总页数赋值
    })
    CategoryTreeInfo()
}

// 初始化类目搜索数据
function CategoryTreeInfo() {
    post({ _gp: 'admin.category', _mt: 'categoryTree' }).then((res) => {
        console.log(res);
        let { data } = res;
        categoryTreeData.value = data
    })
}

// 初始化商品详情数据
function detailInfo(spuId: number) {
    post({ _gp: 'admin.product', _mt: 'detail', spuId: spuId }).then((res) => {
        console.log(res);
        let { data: { detail } } = res;
        detailImage.value = detail
    })
}

//查看
function handleSee(index: number, row: any) {
    detailInfo(row.id)
    dialogImageVisible.value = true
}

//添加
function handleAdd() {
    router.push({ path: 'Create' })
}

// 编辑
function handleEdit(index: number, row: any) {
    router.push({ path: 'Modify/' + row.id })
}

//下架
function handleLower(index: number, row: any) {
    let state = row.status ? 0 : 1
    post({ _gp: 'admin.product', _mt: 'freezeOrActivation', spuId: row.id, status: state }).then((res) => {
        console.log(res);
        let { errmsg, errno } = res
        200 == errno ? ElMessage.success(state ? '激活成功' : '冻结成功') : ElMessage.error(errmsg)
        init()
    })
}

// 分页组件里的数据赋值
function handlePageChange(v: PaginationClass) {
    data.value.page = v.page
    data.value.limit = v.limit
    init()
}
</script>
<style lang="less" scoped>
.grid-content {
    display: flex;
    margin-bottom: 20px;

    .m-2 {
        width: 200px;
        margin-right: 8px;
    }

    .btn {
        margin-left: 8px !important;
    }

    .el-button {
        margin: 0px 8px 0px 0px;
    }
}
</style>